iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Modern Web

給心理人的前端網頁開發系列 第 10

[給心理人的前端網頁開發] 10 關卡一:自介履歷 - CSS

  • 分享至 

  • xImage
  •  

關卡一是幫一個人物寫履歷網頁,主角是一個新興 Vtuber 叫 HowB8,履歷網頁有他的頭貼、設定、經歷與作品集。請先點開連結查看效果:

除了用 HTML 幫履歷添加內容外,想讓履歷好看一點,也會需要用 CSS 去美化一下。CSS 的語法列於文末。以下將講解此 CSS 語法的意義。

一、在網頁引入 CSS

在前面幾天的文章我們知道,當瀏覽器載入網頁時,會優先載入 HTML 檔案中的內容。如果想載入 CSS 樣式的話,就需要額外載入才行。載入 CSS 檔案的方式是用 <link>

<head>
  <link href="./main.css" rel="stylesheet" />
</head>

二、CSS 的選擇器

前幾天的文章有提到,CSS 主要由規則所組成。

選擇器 {
  屬性: 屬性值
}

在初學網頁時,最常用的選擇器有兩種類型:element (標籤/元素) 以及 class(CSS 自定義類別)。如果是 element 的話,只要在 CSS 中填入該標籤的名稱就好。例如 HTML 中 <h1> 這個標籤,在 CSS 中只要在規則中選擇器的部份填入 h1 就好。

CSS 另一種常見的選擇器類型是 class。要使用這種類型的選擇器,會先在 HTML 中的標籤上,加上 class 屬性,然後多增加一個自定義的 class 名稱。這樣之後就能在 CSS 檔案中使用。以下附上範例

// body 是 element 選擇器,代表此規則會套用在 HTML 中的 body 標籤元素上
body {
  background-color: #eeeeee;
}

// .container 是 class 選擇器(用 . 開頭),代表此規則會套用在 HTML 中有 container class 的元素上
.container {
  background-color: white;
}

延伸閱讀

三、使用到的 CSS 介紹

3-1 網頁水平置中

現在電腦螢幕越做越大,在影音或遊戲體驗時,大螢幕可以帶來良好體驗。但在閱讀文章時,若文字過於滿版的話,反而會造成閱讀困難。為了給予良好閱讀體驗,這邊讓 .container 設定了最大寬度 max-width: 600px

另外,為了讓畫面布局好看一點,所以想讓履歷可以水平置中。這時可以讓 <body> 的 display 布局變成是 flex ,並且讓內部的內容物透過 justify-content: center 達到水平置中的效果。

同時, display: flex 還有另外一個好處。本來圖片是會隨著其他文字一起垂直排版的,但透過 display: flex 的話,內容物就會變成水平排版。

延伸閱讀

body {
  display: flex;
  justify-content: center;
}
.container {
  max-width: 600px;
}

3-2 內距與外距

對於每個 HTML 中的標籤(元素)來說,可以把它們想成程式一個正方形的箱子。這個箱子除了內部有東西外 (content),內部的東西與箱子木板會有一段內部距離 (padding,內距),而箱子跟其他的箱子會有外部距離 (margin,外距)。在 CSS 中,我們可以透過 paddingmargin 來調整元素對內與對外的距離。

延伸閱讀

body {
  padding-top: 50px;
  padding-bottom: 50px;
}

.container {
  padding: 50px;
}

.header__img {
  margin-right: 30px;
}

3-3 元素的高與寬

人有環肥燕瘦,元素也有自己的高與寬度。高的話就是 height,寬的話就是 width

延伸閱讀

.container {
  max-width: 600px;
}

.header__img {
  width: 200px;
  height: 200px;
}

3-4 元素的背景顏色

為了讓履歷視覺上更聚焦,主要內容的背景顏色是白色,而其他部份則是使用灰色。CSS 中顏色的值有很多表示方式,例如預設的顏色名稱 white, black、或是使用十六進位制的色碼、RGB 色碼等等。

延伸閱讀

body {
  background-color: #eeeeee;
}

.container {
  background-color: white;
}

小結

本文簡單介紹了履歷 demo 中使用到的 CSS

  • 如何引入 CSS 到 HTML
  • CSS 選擇器的使用
  • 履歷 demo 中使用到的 CSS 介紹

下一篇將說明,或許你不需要自己寫網頁做履歷

小作業:試著調整履歷的背景顏色、內外間距

附註:CSS 的程式碼

body {
  display: flex;
  justify-content: center;
  background-color: #eeeeee;
  padding-top: 50px;
  padding-bottom: 50px;
}

.container {
  max-width: 600px;
  padding: 50px;
  background-color: white;
}

.header {
  display: flex;
}
.header__img {
  width: 200px;
  height: 200px;
  margin-right: 30px;
}

上一篇
[給心理人的前端網頁開發] 09 關卡一:自介履歷 - HTML
下一篇
[給心理人的前端網頁開發] 11 關卡一:也許你不需要自己手刻履歷 - 各種履歷工具
系列文
給心理人的前端網頁開發20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言